// 权限按钮展示指令
import store  from "@/store/index.js";

// 遍历菜单路由buttons数组是否存在匹配按钮
// 使用方法  <el-button @click="addMenu(scope.row.id)" type="text" v-auth >添加子菜单</el-button>
// 默认会根据按钮的innerText 进行匹配， 需要保证后台配置的按钮name与前台页面按钮文本一致。

// 按钮隐藏显示指令
export default {
  install(Vue) {
    Vue.directive("auth", {
      // 当被绑定的元素插入到 DOM 中时……
      bind: async function (el, binding, vnode) {
        // 获取当前页面路由name
        let routerName = vnode.context.$route.name;
        // 如果页面有tab 取tab的路由 再查询button
        if(binding.value&&binding.value.route) {
          routerName = binding.value.route
        }
        // 获取用户访问菜单列表及按钮
        const routerList = store.getters["router/routerList"];
        let flag = false;
        // 根据当前页面路由进行过滤搜索出页面对应的按钮组，通过按钮文本进行匹配，需要在菜单配置页面进行按钮添加配置，按钮名字需要一致
        // eslint-disable-next-line no-useless-escape
        // 如果不是按钮，没有按钮文本，则需要默认传一个btnName
        let buttonInnerText =  binding.value?.btnName ?? el.innerText?.replace(/\ +/g, "");

        
        flag = routerList
          .filter((route) => routerName.split(',').includes(route.value))[0]
          ?.buttons?.some((ch) => ch.name == buttonInnerText);
        // 如果未找到按钮
        // console.log(routerName, binding.value, el.innerText, el.buttonInnerText, flag)
        if (!flag) {
          Vue.nextTick(() => {
            el.parentNode && el.parentNode.removeChild(el);
          });
          el.style.display = "none";
        }
      },
    });
  },
};
